<template>
	<view :class="cstyle" class="cLabelT ">
		<view v-if="mode != 'img' && mode != 'textarea'&& mode != 'video'" :class="['c-'+size,disabled ? 'disabled':'']"
			class="cLabel" :style="flex ? 'display: flex;' : ''">
			<view class="cLabel-l text-cut" v-if="title" :class="flex ? 'flex-l': 'noflex'">{{title}}</view>
			<view class="cLabel-mw">
				<view class="cLabel-m text-cut " :style="{'text-align':align}">
					<!-- mode='' -->
					<view v-if="mode == ''">{{dataText}}</view>
					<!-- mode='text' || 'nrmber' || 'idcard' -->
					<view v-if="mode == 'text'">
						<input :class="disabled ? 'disabledInp': ''" confirm-type="next"
							placeholder-class="input-placeholder" type="text" @input='handInput' :disabled='disabled'
							@blur="handBlur" v-model="inputValue" :placeholder="placeholder? placeholder : '请输入'" />
					</view>
					<view v-if="mode == 'number'">
						<input :class="disabled ? 'disabledInp': ''" confirm-type="next"
							placeholder-class="input-placeholder" type="number" @input='handInput' :disabled='disabled'
							@blur="handBlur" v-model="inputValue" :placeholder="placeholder? placeholder : '请输入' " />
					</view>
					<view v-if="mode == 'idcard'">
						<input :class="disabled ? 'disabledInp': ''" confirm-type="next"
							placeholder-class="input-placeholder" type="idcard" @input='handInput' :disabled='disabled'
							@blur="handBlur" v-model="inputValue" :placeholder="placeholder? placeholder : '请输入'" />
					</view>
					<view v-if="mode == 'password'">
						<input :class="disabled ? 'disabledInp': ''" confirm-type="next"
							placeholder-class="input-placeholder" type="text" password @input='handInput'
							:disabled='disabled' @blur="handBlur" v-model="inputValue"
							:placeholder="placeholder? placeholder : '点击输入'+title " />
					</view>
					<!-- mode='switch' -->
					<view v-if="mode == 'switch'">
						<switch @change="switchChange" :class="dataText?'checked':''" :disabled='disabled'
							:checked="dataText?true:false"></switch>
					</view>



					<!-- moed='selector' -->
					<!-- style="{color:fieldindex>-1?'#555':'#a0a0a0'}" -->
					<view v-if="mode == 'selector'">
						<view v-if="mode == 'selector'" @tap="toggle('selector')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData }}</view>
						<cPicker v-if="mode == 'selector'" mode="selector" :defaultVal="defaultVal" @confirm="hand"
							:disabledAfter="true" ref="selector" :themeColor="themeColor" :selectList="selectList">
						</cPicker>
					</view>

					<!-- moed='half' -->
					<view v-if="mode == 'half'">
						<view v-if="mode == 'half'" @tap="toggle('half')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData}}</view>
						<cPicker v-if="mode == 'half'" mode="half" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="half"
							:themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='date' -->
					<view v-if="mode == 'date'">
						<view v-if="mode == 'date'" @tap="toggle('date')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData }}</view>
						<cPicker v-if="mode == 'date'" mode="date" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="date"
							:themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='yearMonth' -->
					<view v-if="mode == 'yearMonth'">
						<view v-if="mode == 'yearMonth'" @tap="toggle('yearMonth')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'yearMonth'" mode="yearMonth" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="yearMonth" :themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='dateTime' -->
					<view v-if="mode == 'dateTime'">
						<!-- nData -->
						<view v-if="mode == 'dateTime'" @tap="toggle('dateTime')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'dateTime'" mode="dateTime" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="dateTime" :themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='dateTime' -->
					<view v-if="mode == 'range'">
						<view v-if="mode == 'range'" @tap="toggle('range')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'range'" mode="range" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="range" :themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='time' -->
					<view v-if="mode == 'time'">
						<view v-if="mode == 'time'" @tap="toggle('time')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'time'" mode="time" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="time"
							:themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='region' -->
					<view v-if="mode == 'region'">
						<view v-if="mode == 'region'" @tap="toggle('region')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'region'" mode="region" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="region" :themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='selector' -->
					<!-- <view v-if="mode == 'selector'" >
						<view v-if="mode == 'selector'"  @tap="toggle('selector')" class="">{{nData}}</view>
						<cPicker
							v-if="mode == 'selector'"
						    mode="selector" 
						    :startYear="startYear" 
						    :endYear="endYear"
						    :defaultVal="defaultVal" 
						    :current="current" 
						    @confirm="hand"
						    :disabledAfter="true"
						    ref="selector" 
						    :themeColor="themeColor"
						></cPicker>
					</view> -->
					<!-- moed='limit' -->
					<view v-if="mode == 'limit'">
						<view v-if="mode == 'limit'" @tap="toggle('limit')" class="text_align"
							:style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'limit'" mode="limit" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="limit" :themeColor="themeColor"></cPicker>
					</view>
					<!-- moed='limitHour' -->
					<view v-if="mode == 'limitHour'">
						<view v-if="mode == 'limitHour'" @tap="toggle('limitHour')" class="text_align"
							style="text-align: right;" :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
						<cPicker v-if="mode == 'limitHour'" mode="limitHour" :startYear="startYear" :endYear="endYear"
							:defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true"
							ref="limitHour" :themeColor="themeColor"></cPicker>
					</view>


				</view>
				<view v-if="rightText || rightIcon" @tap="handRight">
					<view :class="rightIcon">{{rightText}}</view>
				</view>
				<!-- <view   v-if="rightIcon" >
					<view  ></view>
				</view> -->
			</view>
		</view>

		<!-- mode = 'textarea' top-->
		<!-- :style="`margin-top:${top};min-height:${longT}`" -->
		<view class="cLabel" :style="`margin-top:${top}`" v-if="mode == 'textarea'"
			:class="['c-'+size,disabled ? 'disabled':'']">
			<view class="textarea-t">
				<view class="cLabel-l text-cut textarea-l" v-if="title">{{title}}</view>
				<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
				<view class="cLabel-r" v-if="rightIcon">
					<view :class="rightIcon" @tap="handRight"></view>
				</view>
			</view>

			<view v-if="mode == 'textarea'" class='c-textarea'>
				<textarea :placeholder="placeholder? placeholder : '点击输入'+title " :disabled='disabled' id="forFocus"
					v-model="inputValue" @input="handInput" @blur="handBlur" :maxlength="maxlength"></textarea>
				<label v-if="showNumber" for="forFocus" class="c-textarea-count ">{{textateaL}}/{{maxlength}}</label>
			</view>
		</view>
		<!-- mode='img' -->
		<view class="cLabel" v-if="mode == 'img'" :class="['c-'+size,disabled ? 'disabled':'']">
			<view v-if="title" class="cLabel-l img-l">
				<view class="text-lg">
					<view>{{title}}</view>
					<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
				</view>
				<view class="action">
					{{cimgs.length}}/{{imgL}}
				</view>
			</view>
			<view class="grid col-4 grid-square flex-sub ">
				<view class="bg-img" v-for="(item,index) in cimgs" :key="index" @tap="ViewImage(index)">
					<image :src="cimgs[index]" mode="aspectFill"></image>
					<view v-if="imgType != 'show'" class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="cimgs.length<imgL && imgType != 'show'">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
			<cpImg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="cpimgNumber"
				:fixOrientation="cpimgFixOrientation" :size="cpimgSize" :maxWidth="cpimgMaxWidth" :ql="cpimgQl"
				:type="cpimgType" />
		</view>




		<view class="cLabel" v-if="mode == 'video'" :class="['c-'+size,disabled ? 'disabled':'']">
			<view v-if="title" class="cLabel-l img-l">
				<view class="text-lg">
					<view>{{title}}</view>
					<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
				</view>
				<view class="action">
					{{fastImgLists.length}}/{{maxNum}}
				</view>
			</view>
			<view class="items" style="background-color: #fff;" v-for="(item, index) in fastImgLists" :key="index">
				<view class="bg-img" v-if="item.type == 'video'"
					style="position:relative;display: flex;justify-content: center;align-items: center;width: 80%;margin:auto;padding: 20upx 0;">
					<!-- <image v-show="fastImgLists[index].needload != 'true'" :src="item.src" :id="item.id" style=""
						@click="interVideo(item.filePath)"></image> -->
					<video v-show="fastImgLists[index].needload != 'true'" :src="item.filePath"></video>
					<view @tap.stop="delectVideo($event,item.id)" class="remove cu-tag bg-red" ::data-index="index"
						style="width: 38upx;height: 38upx;position: absolute;top: 20upx;right: 0;z-index:12;background-color: rgba(0,0,0,0.5);">
						<text class='cuIcon-close'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="solids delete" style="margin-top: 30upx;" v-if="canAdd"
						@tap="sourceTypeChangechooseVideo">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import cPicker from "../c-picker/c-picker.vue"
	import cpImg from "../c-upload/cpimg.vue"
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var maxNum = 6;
	import {
		picker
	} from "../mixins/picker.js"

	function oneOf(value, validList) {
		for (let i = 0; i < validList.length; i++) {
			if (value === validList[i]) {
				return true;
			}
		}
		throw new Error('mode无效，请选择有效的mode!');
		return false;
	}
	export default {
		mixins: [picker],
		components: {
			cPicker,
			cpImg
		},
		props: {
			// 主体
			mode: {
				type: String,
				validator(mode) {
					let modeList = ['', 'text', 'number', 'idcard', 'switch', 'textarea', 'password', 'img', 'video',
						'selector',
						'half', 'date', 'dateTime', 'yearMonth', 'time', 'region', 'selector', 'limit', 'limitHour',
						'range'
					]
					return oneOf(mode, modeList);
				},
				default: "",
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			top: {
				type: String,
				default: '0upx',
			},
			// 样式类
			cstyle: {
				type: String,
				default: "",
			},
			size: { // medium small mini
				type: String,
				default: "small",
			},
			flex: {
				type: Boolean,
				default: true,
			},
			align: { // left center right
				type: String,
				default: 'left',
			},
			// 文字类
			title: {
				type: String,
				default: "默认占位符",
			},
			dataText: {
				default: "默认占位符",
				type: [String, Number, Boolean],
			},
			placeholder: {
				type: String,
			},
			maxlength: {
				type: [Number, String],
				default: 200
			},
			rightText: {
				type: String,
			},
			// 状态
			showNumber: {
				type: Boolean,
				default: true,
			},
			clear: {
				type: Boolean,
				default: false,
			},
			// 修饰类
			rightIcon: {
				type: String,
				default: 'cuIcon-right'
			},
			// mode = 'img'
			imgType: { //shou -展示  add - 正常添加  edit-修改
				type: String,
				default: 'add',
			},
			subTitle: {
				type: String,
				default: '',
			},
			imgL: {
				type: Number,
				default: 9,
			},
			imgs: {
				type: Array,
				default: () => []
			},
			cpimgSize: { //照片大小超过此值就压缩，且最大宽高等于maxWidth
				type: Number,
				default: 500
			},
			cpimgMaxWidth: { //照片宽高超过此值就压缩，且最大宽高等于此值
				type: Number,
				default: 750
			},
			cpimgQl: { //照片压缩比 0-1	
				type: Number,
				default: 0.92
			},
			cpimgType: {
				type: String,
				default: 'url'
			}, //照片压缩后返回的格式  base64	
			cpimgFixOrientation: {
				type: Boolean,
				default: true
			}, //是否修正图片方向（暂时只支持H5）
			cpimgNumber: {
				type: Number,
				default: 1
			} //一次压缩图片数量（不支持H5）

		},
		data() {
			return {
				inputValue: undefined,
				textateaL: 0,
				cimgs: this.imgs,

				nData: this.dataText ? this.dataText : this.placeholder ? this.placeholder : '请选择',

				modeList: ['half', 'date', 'dateTime', 'yearMonth', 'time', 'region', 'selector', 'limit', 'limitHour',
					'range'
				],



				fastImgLists: [],
				canAdd: true,
				videosourceType: ['拍摄', '相册'],
				videosourceTypeIndex: 2,
				sourceType: ['拍摄', '相册'],
				maxNum: 6
			};
		},
		watch: {
			dataText(val) {
				// if(this.mode == 'text' || this.mode == 'number' || this.mode == 'idcard' || this.mode == 'textarea'){
				// 	this.inputValue = this.dataText
				// }
				this.inputValue = this.dataText
				this.nData = this.dataText ? this.dataText : this.placeholder ? this.placeholder : '点击选择' + this.title
			}
		},
		methods: {
			toggle(val) {
				if (this.disabled) {
					return
				}
				this.$refs[val].show();
			},
			hand(value) {
				this.$emit('input', value.result)
				this.$emit('getData', value)
			},
			handRight() {
				this.$emit('handRight')
			},
			switchChange(value) {
				this.$emit('hand', value.detail.value)
			},

			// 
			handInput(value) {
				let val = value.detail.value;
				if (this.mode == 'textarea') {
					this.textateaL = val.length;
				}
				this.$emit('input', val)
			},
			handBlur(value) {
				let val = value.detail.value;
				// if(this.mode == 'idcard'){
				// 	if(!this.cardPatt.test(val)){
				// 		uni.showToast({ title:'请正确输入身份证号码', icon:'none' ,mask:true,duration:2000})
				// 		return
				// 	}
				// }
				this.$emit('blur', val)
			},

			// img
			// 图片选择
			ChooseImage() {
				// console.log(this.$refs.cpimg._changImg())
				this.$refs.cpimg._changImg()
			},
			// 
			cpimgOk(val) {
				if (val) {
					this.cimgs = this.cimgs.length != 0 ? this.cimgs.concat(val) : val;
					this.$emit('hand', this.cimgs)
				}
			},
			cpimgErr(val) {
				console.log(val)
			},
			// 删除图片
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该项吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.cimgs.splice(e.currentTarget.dataset.index, 1)
							this.$emit('hand', this.cimgs)
						}
					}
				})
			},
			// 预览图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.cimgs,
					current: e
				});
			},


			sourceTypeChangechooseVideo() {
				var that = this
				uni.showActionSheet({
					title: '选择类型',
					itemList: this.videosourceType,
					success: e => {
						// fVideofile
						that.videosourceTypeIndex = e.tapIndex
						that.chooseVideo(that.videosourceTypeIndex)

					}
				});
			},
			chooseVideo: function(e) {


				let _this = this;

				uni.chooseVideo({

					sourceType: sourceType[e],
					maxDuration: 60,
					success: res => {
						uni.showLoading({
							title: '上传中',
							mask: true
						})

						var videoSrc = res.tempFilePath



						var uploadTask = uni.uploadFile({
							url: "http://129.28.66.56:8052/roadScreen/App/upload/uploadFile.do",
							method: "POST",
							header: {
								'Authorization': 'bearer ' + uni.getStorageSync('token')
							},
							formData: {
								folderid: '123456',
								userId: "e4ae1cb0-93cb-4e07-b05c-a35139844b80", // 当前登录用户的 id
								userName: "贺楠",
							},
							filePath: videoSrc,
							name: 'file',
							success: (res) => {


								var imgSrc = JSON.parse(res.data)[0].atta.fFilepath
								var src;
								if (imgSrc.indexOf("mp4") != -1 && imgSrc.indexOf("D:") != -
									1) {
									imgSrc = imgSrc.replace(/D:/, "http://129.28.66.56:8301/")
									src = imgSrc.replace(/mp4/, "jpg")
								} else {
									src =
										"http://www.limsapp.cn/Content/Upload/Uploadify/Images/BusArticle/20190620/s_jcf57o3caowhkrv1hx32.png"
								}

								// console.log(imgSrc)
								// _this.progress = true
								uni.hideLoading()

								let imgitem = {};
								imgitem.type = 'video';
								// imgitem.id = videoSrc;
								imgitem.id = JSON.parse(res.data)[0].atta.fId
								// console.log(imgitem.id)
								imgitem.src = src;
								imgitem.filePath = videoSrc;
								imgitem.needload = false;
								_this.fastImgLists.push(imgitem);
								//v-for的list数量大于六时，添加标志隐藏
								if (_this.fastImgLists.length >= maxNum) {
									_this.canAdd = false;
								}
								// console.log(res)



							},
							fail(res) {

							}
						})

						uploadTask.onProgressUpdate(function(res) {
							_this.pgList = res.progress;
							setTimeout(() => {
								_this.progress = false
							}, 1500)
							// console.log('上传进度' + res.progress);
							// console.log('已经上传的数据长度' + res.totalBytesSent);
							// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						});
					},
					fail: (err) => {
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.videosourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res
											.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取视频，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},
			// 视频详情
			interVideo(src) {
				// console.log(src)
				uni.navigateTo({
					url: '/pages/commonVideo/commonVideo?src=' + src
				});
			},
			//移除
			delectVideo(e, id) {
				// console.log(e, id);
				let _this = this;
				// console.log('removeImg');
				var index = e.currentTarget.id.replace('grace-items-img-', '');
				_this.fastImgLists.splice(index, 1);
				_this.totalData.recordfiles.push({
					fId: id
				})
				// console.log(_this.totalData.recordfiles)
				if (_this.fastImgLists.length < maxNum) {
					_this.canAdd = true;
				}
			},
		}
	}
</script>

<style lang="scss">
	.cLabelT {
		position: relative;
	}

	.cLabel {
		align-items: center;
		justify-content: space-between;
		border-bottom: 1upx solid rgba(0, 0, 0, .1);
	}

	.cLabel-mw {
		display: flex;
		justify-content: space-between;
		flex: 2;
		align-items: center;
	}

	.cLabel-m {
		flex: 2;
	}

	.text-cut {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-weight: 400;
		// color: #606266;
		// color: rgb(160, 160, 160);
		font-size: 28upx;
	}

	.flex-l {
		width: calc(4em + 15px)
	}

	.noflex {
		margin-bottom: 15px;
	}

	.cLabel-r {
		margin-left: 20upx;
	}

	// sizeh
	.c-mini {
		padding: 10upx 0;
		margin: 0 10upx;
		font-size: 28upx;
		font-weight: 600;
	}

	.c-small {
		padding: 20upx 40upx;
		// margin: 0 20px;
		font-size: 28upx;
		// font-weight: 700;
		background-color: #fff;
	}

	.c-medium {
		padding: 20upx 0;
		margin: 0 20upx;
		font-size: 36upx;
		font-weight: 800;
	}


	.c-textarea {
		overflow: hidden;
		position: relative;
		padding-bottom: 30upx;
	}

	.c-textarea-count {
		position: absolute;
		font-size: 24upx;
		line-height: 32upx;
		bottom: 10upx;
		right: 0px;
		color: #999;
	}

	.c-textarea textarea {
		height: 160upx;
		font-size: inherit;
		display: block;
		width: 100%;
		border: 0;
		box-sizing: border-box;
		outline: 0;
		resize: none;
	}

	.c-textarea:focus-within {
		border-color: #00a5e0;
	}

	.disabled,
	.disabled .uni-input-placeholder,
	.disabled .disabledInp,
	.disabled .input-placeholder {
		color: #aaa;
	}

	// mode = 'switch'

	// mode = textarea
	.textarea-t {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.textarea-l {
		margin-bottom: 30upx
	}

	// mode=img
	.img-l {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30upx;
		align-items: center;
	}

	.img-l .action {
		font-size: 24upx;
		color: #999;
	}

	.subTitle {
		font-size: 12px;
	}


	.uni-input-placeholder {
		color: rgb(160, 160, 160) !important;
		font-size: 28upx;
		text-align: right;
		margin-right: 60upx;
	}

	.uni-input-input {
		color: #333 !important;
		font-size: 28upx;

		padding-right: quote($string: 0u)30px;
		text-align: right;
	}

	.flex-l {
		color: #333 !important;
		font-size: 28upx;
	}

	// 借用 colorui
	.grid {
		display: flex;
		flex-wrap: wrap;
	}

	.flex-sub {
		flex: 1;
	}

	.grid.grid-square>uni-view>uni-text[class*="cuIcon-"] {
		font-size: 52upx;
		position: absolute;
		color: #8799a3;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border: 1upx solid #333;
	}

	.bg-img {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.grid.grid-square .cu-tag {
		position: absolute;
		right: 0;
		top: 0;
		border-bottom-left-radius: 3px;
		padding: 6upx 12upx;
		height: auto;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
	}

	.grid.grid-square>uni-view.bg-img uni-image {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.cu-tag {
		font-size: 24upx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0px 16upx;
		height: 48upx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	.solids::after {
		border: 8upx solid #eee;
	}

	.cuIcon-cameraadd:before {
		// content: "+";
	}

	.grid.col-4.grid-square>uni-view {
		padding-bottom: calc((100% - 30px)/4);
		height: 0;
		width: calc((100% - 30px)/4);
	}

	.grid.col-4>uni-view {
		width: 25%;
	}

	.grid.grid-square>uni-view {
		margin-right: 20upx;
		margin-bottom: 20upx;
		border-radius: 6upx;
		position: relative;
		overflow: hidden;
	}

	// 可删除
	.cuIcon-attentionforbidfill:before,
	.cuIcon-remind:before,
	.cuIcon-vipcard:before,
	.cuIcon-people:before,
	.cuIcon-attentionfill:before,
	.cuIcon-locationfill:before {
		content: "@"
	}

	.cuIcon-close:before {
		content: "×"
	}

	.cuIcon-right:before {
		// content: ">";
		font-family: cuIcon;
		display: block;
		content: "\e6a3";
		font-weight: 400;
		// position: absolute;
		// font-size: 16px;
		color: rgb(160, 160, 160);

		line-height: 70upx;
		font-size: 32upx;
		width: 30upx;

		text-align: center;
		margin-top: 6upx;
		// top: 0;
		// bottom: 0;
		// right: 20px;
		// margin: auto;
	}

	.text_align {
		text-align: right;
		// padding-right: 30px;
	}
</style>
